<template>
	<view class='Home'>
		<view class="section1">
			<u-swiper height="376rpx" :list="info" indicator indicatorMode="line" circular></u-swiper>
		</view>
		<view class="line"></view>
		<view class="section2">
			<u-grid :border="false" @click="click2">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<image :src="baseListItem.url" alt="" />
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="line"></view>
		<view class="section3" @click="click3">
			<u-search placeholder="搜索商品" :showAction="false" disabled></u-search>
		</view>
		<view class="line"></view>
		<view class="section4">
			<view class="lef">
				<view class="green">发展理念</view>
				<text>DEVELOP</text>
			</view>
			<view class="rig">
				<view>绿能芯租科技有限公司</view>
				<text>专注新能源电池研发，领航绿色储能新未来！</text>
			</view>
			<image src="/static/1-4.jpg" alt="" />
		</view>
		<view class="line"></view>
		<view class="section5">
			<view class="lef">
				<view class="green">关于我们</view>
				<text>ABOUT</text>
			</view>
			<image src="/static/1-5.jpg" alt="" />
			<text>作为新能源蓄电池领域的创新先锋，专注于提供全方位的蓄电池解决方案。公司汇聚行业资深专家，凭借先进技术，深入研发适配各类新能源设备的高性能蓄电池。从设计、生产到租赁服务，我们建立了全产业链服务体系，满足不同客户需求。无论是为电动汽车提供持久动力，还是助力储能电站稳定运行，绿能芯租都以可靠品质与高效服务，推动新能源产业迈向新高度，携手客户共同构建绿色、低碳的美好未来。</text>
		</view>
		<Suspension></Suspension>
	</view>
</template>

<script>
	import Suspension from "@/components/suspension"
	export default {
		data() {
			return {
				info: ['/static/1-1.jpg', '/static/1-2.jpg'],
				current: 0,
				swiperDotIndex: 0,
				dotStyle: {
					backgroundColor: 'rgba(255, 255, 255,0.6)',
					selectedBackgroundColor: 'rgba(255, 255, 255,1)',
				},
				baseList: [{
						url: '/static/1-3.jpg',
						title: '绿色能源'
					},
					{
						url: '/static/1-3.jpg',
						title: '智能电气'
					},
					{
						url: '/static/1-3.jpg',
						title: '智能低碳'
					},
				],
			};
		},
		components: {
			Suspension
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			click2(name) {
				uni.showToast({
					icon: 'none',
					title: '服务异常'
				})
			},
			click3(name) {
				uni.showToast({
					icon: 'none',
					title: '服务异常'
				})
			}
		}
	}
</script>

<style lang="scss">
	.line {
		height: 18rpx;
		background-color: #f4f4f4;
	}

	.green {
		position: relative;
	}

	.green::before {
		content: '';
		position: absolute;
		top: 1rpx;
		left: -40rpx;
		width: 40rpx;
		height: 40rpx;
		background: url('/static/green.jpg') 0/cover;
	}

	.section1 {}

	.section2 {
		padding: 30rpx;
		margin-top: 18rpx;

		image {
			width: 90rpx;
			height: 90rpx;
			padding: 10rpx 0 20rpx 0rpx;
		}

		.grid-text {
			font-size: 24rpx;
			color: #909399;
			padding: 10rpx 0 20rpx 0rpx;
		}
	}

	.section3 {
		padding: 24rpx 30rpx;
	}

	.section4 {
		padding: 24rpx 30rpx;

		font-size: 24rpx;

		.lef {
			float: left;
			width: 130rpx;
			padding: 20rpx;

			>view {
				font-size: 32rpx;
				font-weight: 700;
			}

			>text {
				color: #717171;
			}
		}

		.rig {
			float: right;
			width: 390rpx;
			padding: 20rpx;

			>view {
				color: #29ab37;
				font-size: 26rpx;
				font-weight: 700;
			}
		}

		>image {
			width: 680rpx;
			height: 210rpx;
		}
	}

	.section5 {
		padding: 24rpx 30rpx;
		font-size: 24rpx;

		.lef {
			width: 130rpx;
			padding: 20rpx;

			>view {
				font-size: 32rpx;
				font-weight: 700;
			}

			>text {
				color: #717171;
			}
		}

		>image {
			width: 680rpx;
			height: 210rpx;
		}
	}

	@media screen and (min-width: 500px) {}
</style>